<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
        /* :root {
            --theme-color: #000;
            --bg-color: #fff;

            background-color: var(--bg-color);
            color: var(--theme-color);
        }

        :root.dark {
            --bg-color: #303030;
            --theme-color: #fff;
        }

        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation: none;
        } */
    </style>
</head>

<body>
    <button class="btn">切换背景颜色</button>

    <div class="content">
        <p>内容1</p>
        <p>内容2</p>
        <p>内容3</p>
        <p>内容4</p>
        <p>内容5</p>
    </div>
</body>

<script>
    const btn = document.querySelector(".btn");
    btn.addEventListener("click", (e) => {
        let transition = document.startViewTransition(() => {
            console.log('切换主题');
            document.documentElement.classList.toggle("dark");
        });

        transition.ready.then(() => {
            // 获取选中元素的位置信息
            const x = e.clientX;
            const y = e.clientY;

            // 获取画圆的半径
            const radius = Math.sqrt(
                Math.max(x, window.innerWidth - x) ** 2 +
                Math.max(y, window.innerHeight - y) ** 2
            ); // 勾股定理

            document.documentElement.animate(
                {
                    clipPath: [
                        `circle(0 at ${x}px ${y}px)`,
                        `circle(${radius}px at ${x}px ${y}px)`,
                    ],
                }, // 在坐标x,y处从半径为0的圆变为半径为radius的圆
                {
                    duration: 800,
                    pseudoElement: "::view-transition-new(root)",
                }
            );
        });
    });
</script>

</html>